<template>
  <div class="common-panel">
    <div class="common-panel-head">
      <div class="common-panel-title">
        <slot name="common-panel-title__txt">{{ title }}</slot>
      </div>
    </div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'layoutPanel',
  props: {
    title: {
      type: String,
      default: '',
    },
  },
};
</script>
<style lang="less" scoped>
.common-panel-head {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  &::before {
    content: '';
    width: 4px;
    height: 14px;
    background-color: @theme-color;
    margin-right: 8px;
  }
}
.common-panel {
  /deep/ .ant-form-item {
    margin-bottom: 8px;
  }
  /deep/ .ant-form-item-control {
    line-height: 32px;
  }
  /deep/ .ant-tabs-bar {
    margin: 0;
  }
}
.common-panel-title {
  font-size: 16px;
  line-height: 20px;
  align-items: center;
  color: #000000;
}
</style>
